<!--
 * @Author: 庄东东
 * @Date: 2021-08-31 20:05:53
 * @LastEditTime: 2021-09-02 09:41:21
 * @LastEditors: 庄东东
 * @Description: 
 * @FilePath: \romance\src\page\preference.vue
-->
<script lang="ts">
import { computed, toRefs, defineComponent, reactive } from "vue";
import { useStore } from "vuex";
import { GlobalDataProps } from "../store/index";
import age from "../config/age";
import { Toast } from "vant";
export default defineComponent({
  setup() {
    const store = useStore<GlobalDataProps>();
    const preference = computed(() => store.state.userInfo.preference);
    const preferenceAge = computed<string>(
      () => store.getters["getPreferenceAge"]
    );
    const picker = reactive({
      showPreference: false,
      onConfirm(e: [number, number]) {
        let [minAge, maxAge] = e;
        if (minAge > maxAge) {
          Toast("年龄取值范围错误");
          return;
        }
        store.commit("setPreference", {
          minAge,
          maxAge
        });
        picker.showPreference = false;
      }
    });

    let send = () => {
      console.log(99999999999999);
      console.log(preference.value);
    };
    // console.log(111);
    return {
      preference,
      preferenceAge,
      ...toRefs(picker),
      age,
      send
    };
  }
  // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
});
</script>

<template>
  <div class="preference">
    <van-field name="switch" label="偏好优先">
      <template #input>
        <van-switch
          v-model="preference.priority"
          active-color="#808080"
          size="20"
        />
      </template>
    </van-field>
    <van-field name="radio" label="同城优先">
      <template #input>
        <van-radio-group v-model="preference.city" direction="horizontal">
          <van-radio :name="0" checked-color="#808080">是</van-radio>
          <van-radio :name="1" checked-color="#808080">否</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field name="radio" label="性别选择">
      <template #input>
        <van-radio-group v-model="preference.sex" direction="horizontal">
          <van-radio :name="0" checked-color="#808080">男</van-radio>
          <van-radio :name="1" checked-color="#808080">女</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field
      v-model="preferenceAge"
      readonly
      clickable
      name="picker"
      label="年龄范围"
      placeholder="年龄范围"
      @click="showPreference = true"
    />
    <van-popup v-model:show="showPreference" position="bottom">
      <van-picker
        show-toolbar
        :columns="[
          // 第一列
          {
            values: age,
            defaultIndex: 2
          },
          // 第二列
          {
            values: age,
            defaultIndex: 20
          }
        ]"
        @confirm="onConfirm"
        @cancel="showPreference = false"
      />
    </van-popup>
    <div style="margin: 16px" @click="send">
      <van-button round block type="info" native-type="submit">确定</van-button>
    </div>
  </div>
</template>
<style lang="less" scoped></style>
